<template>
  <div :class="['process-panel__container', { hide: !modelShow }]" :style="{ width: `${this.width}px` }">
    <div class="process-properties-bar">
      <div class="oper" @click="switchClick">
        <i :class="modelShow ? 'el-icon-caret-right' : 'el-icon-caret-left'" :title="modelShow ? '折叠' : '展开'"></i>
      </div>
    </div>
    <el-collapse v-model="activeTab" v-show="modelShow">
      <el-collapse-item name="base">
        <div slot="title" class="panel-tab__title">
          {{ this.infoType === 'model' ? '指标模型基本信息' : '指标基本信息' }}
        </div>
        <IndexBaseInfo :info-type="infoType" :info="nodeDetail" ref="baseInfo"></IndexBaseInfo>
      </el-collapse-item>
      <el-collapse-item name="score">
        <div slot="title" class="panel-tab__title">
          {{ this.infoType === 'model' ? '指标模型计算信息' : '指标评分信息' }}
        </div>
        <IndexScoreInfo
          :info-type="infoType"
          :info="nodeDetail"
          :total-score="totalScore"
          ref="scoreInfo"></IndexScoreInfo>
      </el-collapse-item>
    </el-collapse>
    <div v-if="pageType !== 'view' && modelShow" class="btn-footer">
      <el-button size="small" type="primary" :loading="loading" @click.stop="saveNode">保 存</el-button>
    </div>
  </div>
</template>
<script>
import IndexBaseInfo from './IndexBaseInfo'
import IndexScoreInfo from './IndexScoreInfo'
import { getModelData, getTargetData, saveModelData, saveTargetData } from '@api/modules/indexModel.js'
export default {
  name: 'IndexPanel',
  components: {
    IndexBaseInfo,
    IndexScoreInfo,
  },
  emits: ['switch', 'update-success'],
  props: {
    // 节点信息
    nodeInfo: {
      type: Object,
      default: () => {},
    },
    // 树信息
    treeInfo: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    infoType() {
      // 05-模型信息， 06-指标信息
      return this.nodeInfo.busType === '05' ? 'model' : 'index'
    },
    pageType() {
      return this.$route.query.type || 'add'
    },
    totalScore() {
      if (this.nodeInfo && this.nodeInfo.busId) {
        // 根节点
        if (this.nodeInfo.isRoot) {
          this.getParentScore(this.treeInfo, [], 0)
          return Number(this.nodeInfo.assessScore)
        } else {
          // 指标信息
          this.getParentScore(this.treeInfo, this.treeInfo.children || [], 1)
          return this.scoreInfo[this.nodeInfo.busId].parentScore
        }
      } else {
        return 100
      }
    },
  },
  watch: {
    nodeInfo: {
      handler(obj) {
        if (obj && obj.busId) {
          this.getNodeInfo(obj.busId)
        }
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      modelShow: true,
      width: 360,
      activeTab: ['base', 'score'],
      nodeDetail: {}, // 模型/指标信息
      scoreInfo: {}, // 节点的
      loading: false,
    }
  },
  methods: {
    switchClick() {
      this.modelShow = !this.modelShow
      this.$emit('switch', this.modelShow)
    },
    // 获取父指标的总分数
    getParentScore(parent, list, n) {
      if (n === 0) {
        this.scoreInfo[parent.busId] = {
          level: 0,
          parentScore: Number(parent.assessScore) || 0,
          score: Number(parent.assessScore) || 0,
          name: parent.assessName || '',
        }
      } else {
        list.forEach(item => {
          this.scoreInfo[item.busId] = {
            parentScore: Number(parent.assessScore) || 0,
            score: Number(item.assessScore) || 0,
            name: item.assessName,
            level: n,
          }
          if (item.children && item.children.length) {
            this.getParentScore(item, item.children, n + 1)
          }
        })
      }
    },
    // 获取节点信息
    getNodeInfo(id) {
      if (this.infoType === 'model') {
        this.getModelInfo(id)
      } else {
        this.getIndexInfo(id)
      }
    },
    // 获取模型信息
    async getModelInfo(id) {
      const { code, data } = await getModelData(id)
      if (code === 0 && data.id) {
        this.nodeDetail = data
      }
    },
    // 获取指标信息
    async getIndexInfo(id) {
      const { code, data } = await getTargetData(id)
      if (code === 0 && data.id) {
        this.nodeDetail = data
      }
    },
    // 保存指标模型信息
    saveNode() {
      const resultBool = this.checkScore()
      if (!resultBool) {
        this.$confirm('当前同一级的指标或模型的分数之和不等于父节点模型的分数，是否继续保存当前数据？', '提示', {
          confirmButtonText: '继续保存',
          cancelButtonText: '修改分数',
          type: 'warning',
        })
          .then(() => {
            this.confirmSave()
          })
          .catch(() => {
            return false
          })
      } else {
        this.confirmSave()
      }
    },
    // 保存
    confirmSave() {
      if (this.loading) {
        return false
      }
      this.loading = true
      let apiName = null
      let tips = ''
      let params = {}
      const baseInfo = this.$refs.baseInfo.baseInfo
      const scoreInfo = this.$refs.scoreInfo.scoreInfo
      if (this.infoType === 'model') {
        apiName = saveModelData
        tips = '模型数据保存成功'
        params = {
          assessInfo: '',
          id: this.nodeInfo.busId || this.nodeDetail.id,
          modelAlias: baseInfo.aliasName || this.nodeDetail.modelAlias,
          modelDescribe: baseInfo.desc || this.nodeDetail.modelDescribe,
          modelName: baseInfo.name || this.nodeDetail.modelName,
          modelNum: this.nodeDetail.modelNum || '',
          modelScore: scoreInfo.totalScore || this.nodeDetail.modelScore,
        }
      } else {
        apiName = saveTargetData
        tips = '指标数据保存成功'
        params = {
          assessInfo: scoreInfo.assessInfo || this.nodeDetail.assessInfo,
          id: this.nodeInfo.busId || this.nodeDetail.id,
          optionEntityRequests: scoreInfo.options || this.nodeDetail.optionEntityRequests,
          targetAlias: baseInfo.aliasName || this.nodeDetail.targetAlias,
          targetDescribe: baseInfo.desc || this.nodeDetail.targetDescribe,
          targetName: baseInfo.name || this.nodeDetail.targetName,
          targetNum: this.nodeDetail.targetNum,
          targetScore: scoreInfo.totalScore || this.nodeDetail.targetScore,
        }
      }
      apiName(params)
        .then(res => {
          this.loading = false
          if (res.status === 200 || res.code === 0) {
            this.$message.success(tips)
            this.$emit('update-success')
          }
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 校验分支的分数之和等于父节点总分
    checkScore() {
      const curId = this.nodeInfo.busId || this.nodeDetail.id
      const curLevel = this.scoreInfo[curId].level
      let curScore = this.$refs.scoreInfo.scoreInfo.totalScore || this.nodeDetail.targetScore
      curScore = Number(curScore)
      let totalScore = 0
      for (const i in this.scoreInfo) {
        if (this.scoreInfo[i].level === curLevel) {
          const score = i !== curId ? this.scoreInfo[i].score : curScore
          totalScore += score
        }
      }
      return this.totalScore === totalScore
    },
  },
}
</script>
<style lang="scss" scoped>
.process-panel__container {
  position: absolute;
  top: 0;
  right: 0;
  height: calc(100% - 20px);
  box-sizing: border-box;
  border-left: 1px solid #eeeeee;
  box-shadow: 0 0 8px #cccccc;
  background-color: #fff;
  &.hide {
    padding: 0;
    width: 38px !important;
  }
  .el-collapse {
    padding: 0 8px;
    height: calc(100% - 90px);
    overflow-y: auto;
  }
  .process-properties-bar {
    .oper {
      height: 40px;
      line-height: 40px;
      width: 36px;
      text-align: center;
      font-size: 20px;
      cursor: pointer;
    }
  }

  .btn-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 10px;
    .el-button {
      width: 180px;
    }
  }
}
.panel-tab__title {
  font-weight: 600;
  padding: 0 8px;
  font-size: 14px;
  line-height: 24px;
  border-left: 3px solid #409eff;
}
.panel-tab__content {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 16px;
  .panel-tab__content--title {
    display: flex;
    justify-content: space-between;
    padding-bottom: 8px;
    span {
      flex: 1;
      text-align: left;
    }
  }
}
</style>
